<template>
    <cl-crud ref="Crud">
        <cl-row>
            <!-- 刷新按钮 -->
            <cl-refresh-btn />
            <!-- 新增按钮 -->
            <cl-add-btn />
            <!-- 删除按钮 -->
            <cl-multi-delete-btn />
            <!-- 音频类别 -->
            <cl-filter label="音频类别">
                <cl-select :options="options.type" prop="type" :width="120" />
            </cl-filter>
            <cl-flex1 />
        </cl-row>

        <cl-row>
            <!-- 数据表格 -->
            <cl-table ref="Table">
                <template #column-url="{ scope }">
                    <audio controls :src="scope.row.url"></audio>
                </template>
                <template #column-server_url="{ scope }">
                    <div v-if="scope.row.server_url">
                        <audio controls :src="config.host+scope.row.server_url"></audio>
                    </div>
                    <div v-else style="color:#f56c6c">
                        <el-tag type="danger" class="tag" @click="onSynchronize(scope.row)"> 服务器查询不到该文件,点击右侧按钮将云存储文件同步到服务器</el-tag>
                    </div>
                </template>
                <template #slot-btn="{ scope }">
                    <el-button type="primary" @click="onSynchronize(scope.row)" v-if="!scope.row.server_url">同步</el-button>
                </template>
            </cl-table>
        </cl-row>

        <cl-row>
            <cl-flex1 />
            <!-- 分页控件 -->
            <cl-pagination />
        </cl-row>

        <!-- 新增、编辑 -->
        <cl-upsert ref="Upsert" />
    </cl-crud>
</template>

<script lang="ts" name="broadcast-file" setup>
import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useCool } from "/@/cool";
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";

import { config, isDev } from "/@/config";
const { service } = useCool();
console.log(config, isDev);
const options = reactive({
	type: [
		{
			label: "男声",
			value: "nan"
		},
		{
			label: "女声",
			value: "nv"
		}
	],
	name: [
		{
			label: "·",
			value: "kong"
		},
		{
			label: "0",
			value: "0"
		},
		{
			label: "1",
			value: "1"
		},
		{
			label: "2",
			value: "2"
		},
		{
			label: "3",
			value: "3"
		},
		{
			label: "4",
			value: "4"
		},
		{
			label: "5",
			value: "5"
		},
		{
			label: "6",
			value: "6"
		},
		{
			label: "7",
			value: "7"
		},
		{
			label: "8",
			value: "8"
		}
	]
});
// cl-upsert
const Upsert = useUpsert({
	items: [
		{
			label: "音频名称",
			prop: "name",
			component: { name: "el-select", options: options.name },
			required: true
		},
		{
			label: "音频类别",
			prop: "type",
			component: { name: "el-select", options: options.type },
			required: true
		},
		{
			label: "音频链接",
			prop: "url",
			component: {
				name: "cl-upload",
				props: { beforeUpload: onBeforeUpload, type: "file", limit: 1, accept: "audio/*" }
			},
			required: true
		}
	],
	async onSubmit(data, { done, close, next }) {
		if (size.value == 0) {
			ElMessage.warning("音频大小获取失败,请检测文件是否上传成功");
			return;
		}
		next({
			...data,
			size: size.value
		}).then((res) => {
			size.value = 0;
		});
		// done 关闭加载状态
		// close 关闭弹窗
	},
	async onOpened(data) {
		if (Upsert.value?.mode != "info") {
			console.log(data);
			size.value = data.size;
			// ElMessage.info("编辑中");
		}
	}
});
const size = ref<number>(0);
async function onBeforeUpload(file: any, item: any) {
	size.value = Math.round((file.size / 1024) * 100) / 100;
	console.log(Math.round((file.size / 1024) * 100) / 100);
	return true;
}
async function onSynchronize(params) {
	console.log(params.id);
	service.broadcast.file.synchronize(params).then((res) => {
		ElMessage.success("同步成功");
		Crud.value?.refresh();
		console.log(res);
	});
}
// cl-table
const Table = useTable({
	columns: [
		{ type: "selection" },
		{ label: "音频名称", prop: "name", minWidth: 100 },
		{ label: "音频类别", prop: "type", dict: options.type, dictColor: true, minWidth: 100 },
		{ label: "服务器音频", prop: "server_url", minWidth: 400 },
		{ label: "云存储音频", prop: "url", minWidth: 320 },
		{ label: "音频大小-kb", prop: "size", minWidth: 120 },
		{ label: "音频时长-秒", prop: "duration", minWidth: 110 },
		{
			label: "更新时间",
			prop: "updateTime",
			minWidth: 170,
			sortable: "custom",
			component: { name: "cl-date-text" }
		},
		{ type: "op", buttons: ["slot-btn", "delete"] } //"edit",
	]
});

// cl-crud
const Crud = useCrud(
	{
		service: service.broadcast.file
	},
	(app) => {
		app.refresh();
	}
);
</script>
<style scoped>
.tag:hover {
	cursor: pointer;
}
</style>